<template>
    <div class="addProject business-workAdd">
        <div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="6">
						<p style="line-height: 32px;font-size: 14px;">2024-05-06</p>
                        <div class="ban_ci" >
                            <li @click="changeBanCi(item)" :class="{'active': currentChooseBanCi == item }" 
                                v-for="(item,index) in onDutyPersonList" :key="index">
                                <span>{{item + '(' + (currentChooseBanCi == item ? 10 : 2) + ')'}}</span>
                            </li>
                        </div>
                    </el-col>
					<el-col :span="6">
						<el-form-item class="formList" prop="data1" label="今日出勤：">
							<el-input clearable class="input_right"  v-model="addForm.data1" :disabled="type == 'see'" ></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data2" label="本班出勤：">
							<el-input clearable class="input_right"  v-model="addForm.data2" :disabled="type == 'see'"></el-input>
						</el-form-item>
                    </el-col>
					<el-col :span="6">
						<el-form-item class="formList" prop="data3" label="状态：">
							<el-input clearable class="input_right"  v-model="addForm.data3" :disabled="type == 'see'" ></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data4" label="申报人：">
							<el-input clearable class="input_right"  v-model="addForm.data4" :disabled="type == 'see'" ></el-input>
						</el-form-item>
                    </el-col>
					<el-col :span="6">
						<el-form-item class="formList" prop="data5" label="核定人：">
							<el-input clearable class="input_right"  v-model="addForm.data5" :disabled="type == 'see'" ></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data6" label="完成日期：">
							<el-date-picker clearable class="input_right"  v-model="addForm.data6" :disabled="type == 'see'" 
                                type="date">
                            </el-date-picker>
						</el-form-item>
                    </el-col>
                </el-row>
                <div v-if="isReport == 0" class="report_part">
                    <p class="noData">本班“报工考勤”尚未创建！点击下方“立即申报”即可开始本班报工及考勤</p>
                    <p class="zll-botton" @click="isReport = 2" v-if="type !== 'see'"><i class="el-icon-circle-plus-outline"></i> 立即申报</p>
                </div>
                <div v-if="isReport == 1" class="report_part">
                    <p class="noData">20:00 以后才可以创建，请耐心等待！</p>
                </div>
                <div v-if="isReport == 2">
                    <div class="con_p">
                        <div class="tab_list">
                            <li v-for="(item,index) in tabList" :key="index"
                                :class="{'active': currentTab == item.name}"
                                @click="changeTab(item)"
                            >{{item.name + '(' + item.num + ')'}}</li>
                        </div>
                        <div class="mine-add" v-if="type == 'add'">
                            <span @click="addTable()"><i class="el-icon-circle-plus"></i></span>
                            <span @click.stop="deleteTable()"><i class="el-icon-remove-outline"></i></span>
                            <span @click="addKaoQin()" v-if="currentTab !== '生产'"><i class="el-icon-s-custom"></i></span>
                        </div>
                    </div>
                    <div v-if="currentTab !== '生产'" class="tableList" style="margin-top: 0 !important;">
                        <table border="1">
                            <tr>												
                                <th width="40"></th>										
                                <th>品类</th>
                                <th>机台</th>
                                <th>任务名称</th>
                                <th width="220">规格</th>
                                <th>单件万支</th>
                                <th>件数</th>
                                <th>产能万支</th>
                                <th>工序</th>
                                <th>姓名</th>
                                <th>考勤</th>
                                <th>备注</th>
                            </tr>
                            <tr class="add_Table" v-for="(item,index) in addForm.tableList" :key="index">
                                <td width="40">
									<el-checkbox v-model="item.checked"></el-checkbox>
								</td>
                                <td>
                                    <el-select v-model="item.data1" placeholder="" class="text_center" clearable :disabled="type == 'see'" >
                                        <el-option label="单支联排" value="单支联排"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-select v-model="item.data2" placeholder="" class="text_center" clearable :disabled="type == 'see'" >
                                        <el-option label="1" value="1"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-select v-model="item.data3" placeholder="" class="text_center" clearable :disabled="type == 'see'" >
                                        <el-option label="1" value="1"></el-option>
                                    </el-select>
                                </td>
                                <td><el-input v-model="item.data4" placeholder="" class="text_center" clearable disabled></el-input></td>
                                <td><el-input v-model="item.data5" placeholder="" class="text_center" clearable disabled></el-input></td>
                                <td><el-input v-model.number="item.data6" placeholder="" class="text_center" clearable :disabled="type == 'see'"></el-input></td>
                                <td><el-input v-model="item.data7" placeholder="" class="text_center" clearable disabled></el-input></td>
                                <td><el-input v-model="item.data8" placeholder="" class="text_center" clearable :disabled="type == 'see'"></el-input></td>
                                <td width="150">
                                    <p v-for="(item2, index2) in item.data9" :key="index2">
                                        <el-input v-model="item2.name" placeholder="" class="text_center" clearable :disabled="type == 'see'"></el-input>
                                    </p>
                                </td>
                                <td width="150">
                                    <p v-for="(item2, index2) in item.data10" :key="index2">
                                        <el-input v-model="item2.name" placeholder="" class="text_center" clearable :disabled="type == 'see'"></el-input>
                                    </p>
                                </td>
                                <td><el-input v-model="item.data11" placeholder="" class="text_center" clearable  :disabled="type == 'see'"></el-input></td>
                            </tr>
                        </table>
                    </div>
                    <div v-else class="tableList" style="margin-top: 0 !important;">
                        <table border="1">
                            <tr>																
                                <th>部门</th>
                                <th>姓名</th>
                                <th>出勤</th>
                                <th>备注</th>
                            </tr>
                            <tr class="add_Table" v-for="(item,index) in addForm.tableList" :key="index">
                                <td>
                                    <el-select v-model="item.data1" placeholder="" class="text_center" clearable :disabled="type == 'see'" >
                                        <el-option label="1" value="1"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-select v-model="item.data2" placeholder="" class="text_center" clearable :disabled="type == 'see'" >
                                        <el-option label="1" value="1"></el-option>
                                    </el-select>
                                </td>
                                <td><el-input v-model="item.data3" placeholder="" class="text_center" clearable disabled></el-input></td>
                                <td><el-input v-model="item.data4" placeholder="" class="text_center" clearable  :disabled="type == 'see'"></el-input></td>
                            </tr>
                        </table>
                    </div>
                    <div class="bottom_nav">
						<p class="zll-botton Info" @click="closeAdd()">关 闭</p>
						<p class="zll-botton" v-if="type !== 'see'" @click="submitForm">提 交</p>
					</div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    props: ['type','editData'],
    data(){
        return {
            currentTab: '单多支',
            tabList: [
                {name:'单多支',num: 20},
                {name:'伸缩',num: 11},
                {name:'U型',num: 2},
                {name:'生产',num: 5},
            ],
            addForm: {
                data1:'',
                data2:'',
                data3:'',
                data4:'',
                data5:'',
                data6:'',
                tableList: [
                    {data1:'单支联排',data2:'2',data3:'2',data9:[{name:'张三'},{name:'张三2'},],data10:[{name:'1'},{name:'2'},]},
                    {data1:'单支联排',data2:'1',data3:'1',data9:[{}],data10:[{}]},
                    {data1:'单支联排',data2:'1',data3:'1',data9:[{}],data10:[{}]},
                    {data1:'单支联排',data2:'2',data3:'1',data9:[{}],data10:[{}]},
                ]
            },
            onDutyPersonList: ['白班','夜班'],
            currentChooseBanCi: '白班',
            isReport: 0,//0未申报 1未到时间 2申报
            rules: {
                data1: [
                    {required: true, message: '请输入今日出勤', trigger: 'blur'},
                ],
                data2: [
                    {required: true, message: '请输入本班出勤', trigger: 'blur'},
                ],
                data4: [
                    {required: true, message: '请输入申报人', trigger: 'blur'},
                ],
                data5: [
                    {required: true, message: '请输入核定人', trigger: 'blur'},
                ],
                data6: [
                    {required: true, message: '请选择完成日期', trigger: 'change'},
                ],
            },
        }
    },
    methods: {
        addKaoQin() {
            this.addForm.tableList.filter(val=>{
                if(val.checked){
                    val.data9.push({})
                    val.data10.push({})
                }
            })
        },
        changeBanCi(val) {//切换白夜班
            this.currentChooseBanCi = val;
            if(val == '夜班') {
                this.isReport = 1
            }else {
                this.isReport = 0
            }
        },
        changeTab(val) {
            this.currentTab = val.name
        },
        addTable() {
            if( this.currentTab !== '生产') {
                this.addForm.tableList.push({
                    data1:'',
                    data2:'',
                    data3:'',
                    data4:'',
                    data5:'',
                    data6:'',
                    data7:'',
                    data8:'',
                    data9:'',
                    data10:'',
                    data11:'',
                });
            }else {
                this.addForm.tableList.push({
                    data1:'',
                    data2:'',
                    data3:'',
                    data4:'',
                });
            }
        },
        deleteTable() {//删除table
            let tableList = [];
            this.addForm.tableList.filter(val=>{
                if(!val.checked){
                    tableList.push(val)
                }
            })
            this.addForm.tableList = tableList
        },
		submitForm() {
			let self = this;
            self.$refs['addForm'].validate((valid) => {
                if (valid) {
                    self.$eventBus.$emit("updateWorkList");
                } else {
                    return false;
                }
            });
		},
        closeAdd() {
            this.$eventBus.$emit("updateWorkList");
        }
    },
    mounted(){
        
    },
    components: {
    }
}
</script>
<style lang="scss" scoped>
    @import "@/style/dialog.scss";
    .business-workAdd.addProject {
        position: relative;padding-bottom: 40px;min-height: 100%;
        .con_p {
            display: flex;justify-content: space-between;margin-top: 20px;margin-bottom: 10px;
            .tab_list {
                display: flex;
                li {
                    width: 140px;line-height: 32px;border-bottom: 1px solid #fff;
                    text-align: center;cursor: pointer;color:#918d8d;
                    &.active {
                        color: #2196f3;font-size: 14px;border-bottom: 1px solid #2196f3;
                    }
                }
            }
        }
        .report_part {
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .noData {
                text-align: center;color: #918d8d;line-height: 40px;
            }
            .zll-botton {
                width: 120px;
            }
        }
        .bottom_nav {
            display: flex;justify-content: center;position: absolute;
            width: 100%;
            bottom: 20px;z-index: 1111;
            .zll-botton {
                margin: 0 20px;
            }
        }
        .ban_ci {
            display: flex;
            li {
                width: 130px;
                background: #ddd;
                color: #918d8d;
                line-height: 30px;
                height: 30px;
                text-align: center;
                margin-right: 5px;
                cursor: pointer;
                display: flex;align-items: center;justify-content: center;

                &.active {
                    background: #2196f3;
                    color: #fff;
                }
                img {
                    width: 20px;height: 20px;margin-right: 5px;
                }
            }
        }
        .formList {
            margin-bottom: 0px;
            height: 32px;
        }
        .tableList {
            margin-bottom: 20px;
            table {
                tr {
                    background: #fff !important;
                    td {
                        padding: 1px 3px;
                    }
                }
            }
        }
    }
</style>